<template>
  <Row>
    <Col :span="12">
      <Dictionary @select-change="dictionarySelectChange" />
    </Col>
    <Col :span="12">
      <DictionaryItem :dictionary-id="dictionaryId" />
    </Col>
  </Row>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Row, Col } from 'ant-design-vue';

  import Dictionary from './components/dictionary.vue';
  import DictionaryItem from './components/dictionary-item.vue';
  import { DictionaryListModel } from '/@/views/system/dictionary/model';

  const dictionaryId = ref<string | null>(null);
  const dictionarySelectChange = (record: DictionaryListModel) => {
    const { id } = record;
    dictionaryId.value = id;
  };
</script>

<style scoped></style>
